<template>
    <div ref="el">

        <el-tabs v-model="active"
                 type="card"
                 closable
                 @tab-click="openTab"
                 @tab-remove="delTab"
                 @contextmenu.native="handleContextmenu"
        >

            <el-tab-pane
                    v-for="item in tabList"
                    :label="item.meta.tabTitle" :name="item.meta.tabId"
            ></el-tab-pane>
        </el-tabs>
        <!--右键操作标签-->
        <div class="tabs-menu" v-if="contextmenuFlag" :style="{left: contextmenuX + 'px',top: contextmenuY + 'px'}">
            <div class="item" @click="refreshPage">刷新页面</div>
            <div class="item" @click="closeOthers">关闭其他</div>
            <div class="item" @click="closeAll">关闭全部</div>
        </div>
    </div>
</template>

<script setup>
    import {useStore} from 'vuex';
    import { useRouter} from 'vue-router';
    import {computed,onMounted, ref,watch,inject} from 'vue'

    const store = useStore();
    const router = useRouter();
    const refresh = inject('refresh')

    //响应式数据
    let active = ref(''),
      contextmenuX = ref(''),
      contextmenuY = ref(''),
      contextmenuFlag = ref(false),
      el = ref(null);
    let curContextmenuPath = '',
      tabs = {};


    //计算属性
    let tabList = computed(() => store.getters.getTabList),
      tab = computed(() => store.getters.getTab);

    //监听数据
    watch(tab,(val) => {
      setActive();
    });
    watch(contextmenuFlag,(val) =>{
      if (val) window.addEventListener('mousedown',watchContextmenu);
      else window.removeEventListener('mousedown',watchContextmenu)
    })

    //方法
    function setActive(){
      if (tab.value.meta){
        tabs[tab.value.meta.tabId] = tab.value.fullPath;
        active.value = tab.value.meta.tabId;
      }
    }
    //打开标签页
    function openTab(tab){
      let fullPath = tabs[tab.props.name];
      let path = fullPath.split('?')[0],
        queryStr = fullPath.split('?')[1],
        queryArr = [],
        query = {};
      if (queryStr){
        queryArr = queryStr.split('&');
        queryArr.forEach(item => {
          let arr = item.split('='),
            key = arr[0],
            val =arr[1] || '';
          query[key] = val;
        })
      }
      router.push({path,query});
    }
    //删除标签页
    function delTab(item){
      let index = tabList.value.findIndex(ite => {
        return ite.meta.tabId === item
      })
      store.commit('DEL_TAB', item);
      if (active.value === item){
        let tab = tabList.value[index === 0 ? index : index -1]

        router.push({
          path: tab ? tab.path : '/'
        });
      }
    }

    //关闭其他标签页
    function closeOthers() {
      contextmenuFlag.value = false;
      store.commit('DEL_OTHER_TAB',curContextmenuPath);
      if (curContextmenuPath !== active.value) router.push({
        path: curContextmenuPath
      });
    }
    //关闭所有标签页
    function closeAll() {
      contextmenuFlag.value = false;
      store.commit('DEL_ALL_TAB')
      router.push({
        path: '/'
      });
    }

    //刷新页面
    function refreshPage() {
      contextmenuFlag.value = false;
      if (curContextmenuPath !== active.value) router.push({
        path: curContextmenuPath
      });
      refresh();
    }


    //标签右键操作
    function handleContextmenu(e){
      let target = e.target,
        flag = false;
      if (target.className.indexOf('el-tabs__item') > -1) flag = true;

      if (flag) {
        e.preventDefault();
        e.stopPropagation();
        contextmenuX.value = e.clientX;
        contextmenuY.value = e.clientY;
        contextmenuFlag.value = true;

        curContextmenuPath = target.id.split('tab-')[1];
      }
    }
    //监听鼠标右键
    function watchContextmenu(e){
      if (!el.value.contains(e.target) || e.button !== 0 ){
        contextmenuFlag.value = false;
      }
    }

    onMounted (() => {
      setActive();
    })
</script>

<style scoped lang="less">
    .tabs-menu{
        position: fixed;
        width: 120px;
        background: #fff;
        z-index: 1000;
        border-radius: 5px;
        box-shadow: 1px 2px 10px #ccc;
        padding: 5px 0;
        .item{

            cursor: pointer;
            font-size: 14px;
            padding: 8px 20px 8px 15px;
            color: #606266;
            &:hover {
                background-color: #409EFF;
                color: #fff;
            }
        }
    }
</style>
